<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;padding: 0;
        }
        .box{
            width: 400px;height: 400px;border: 2px solid black;margin: 50px auto 0;
            font-size: 200px;line-height: 400px;text-align: center;
        }
        .btns{
            width: 400px;
            margin: 25px auto;
            display: flex;justify-content: space-around;
        }
        .btns input{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="box">8</div>
    <div class="btns">
        <input type="button" value="开始" id="btn1">
        <input type="button" value="暂停" id="btn2" disabled="disabled">
        <input type="button" value="复位" id="btn3" disabled="disabled">
    </div>
</body>
<script>
    // 获取元素
    var obox=document.querySelector(".box");
    var obtn1=document.querySelector("#btn1");
    var obtn2=document.querySelector("#btn2");
    var obtn3=document.querySelector("#btn3");

    // 获取内容
    var start=obox.innerHTML;

    // 计时器的返回值
    var t;

    // 点击开始
    obtn1.onclick=function(){
        // 禁用开始
        obtn1.setAttribute("disabled","disabled");
        // 删掉暂停的禁用，让暂停可以正常使用
        obtn2.removeAttribute("disabled");
        // 先清除计时器
        clearInterval(t);
        // 创建计时器
        t=setInterval(function(){
            // 判断是否到终点
            if(obox.innerHTML==1){
                clearInterval(t);
                obox.innerHTML=0;
                obtn1.setAttribute("disabled","disabled");
                obtn2.setAttribute("disabled","disabled");
                obtn3.removeAttribute("disabled");
            }else{
                obox.innerHTML=obox.innerHTML-1;
            }
        },1000)
    }

    // 点击暂停
    obtn2.onclick=function(){
        obtn2.setAttribute("disabled","disabled");
        obtn1.removeAttribute("disabled")
        clearInterval(t);
    }

    // 点击复位
    obtn3.onclick=function(){
        obox.innerHTML=start;
        obtn1.removeAttribute("disabled");
        obtn3.setAttribute("disabled","disabled")
    }
</script>
</html>